<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        /* #app{}
        [id="app"]{} */

        /* 属性选择器 */
        /* [属性名="属性值"]{

        } */

        /* 如果元素中存在v-cloak 属性 默认隐藏., 等Vue实例准备完毕, 自定删除该属性 */

        p {
            height: 40px;
            line-height: 40px;
            /* border: 1px dashed #333; */
        }

        .wrap{
            width: 200px;
            height: 200px;
            background-color: gray;
            overflow: hidden;
        }
        .sub {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            margin: 50px;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>按键修饰符</h2>
        <div>
            <!-- <textarea @keydown.enter="inputHandler" cols="30" rows="10"></textarea> -->
            <!-- <textarea @keydown.esc="inputHandler" cols="30" rows="10"></textarea> -->
            <textarea @keydown.left.right.up.down="inputHandler" cols="30" rows="10"></textarea>
        </div>

    </div>
</body>
<script>

    /* 

     v-指令名称:参数.修饰符 = "指令值"
        1. 修饰符是由点开头的指令后缀来表示的。
        2. 修饰符可以有多个  


    事件修饰符:(事件触发时相关数据)
        .stop      阻止事件冒泡
        .capture   以事件捕获方式触发事件 
        .self      只有元素本身可以触发事件 (e.target === this)
        .prevent   阻止浏览器默认行为
        .once      事件只触发一次
        .passive   修饰符尤其能够提升移动端的性能。

    按键修饰符:   (特定按键按下时触发事件)
        .enter   回车键
        .tab     tab键
        .delete (捕获“删除”和“退格”键)    delete键
        .esc     
        .space
        .up
        .down
        .left
        .right

    
    */


   

    // v-once
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "hello world",
            count: 100,
        },
        methods: {
            inputHandler:function(e){
                console.log("按下按键",e.key);
                console.log("按下按键的键盘码",e.keyCode);
            }
        }
    })


</script>


</html>